/* @flow */
'use strict';

var React = require('react-native');

var {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
} = React;

var ContentCell = React.createClass({


   getInitialState:function () {
  	return {
  		newsItem:this.props.newsItem
  	};
  },
  render: function() {
    return (
		<TouchableOpacity onPress={this.props.onPressThisCell}>
	      <View style={styles.cellContentStyle}>
	      	<Image
	      	  style={styles.imageStyle}
	      	  source={{uri: this.props.newsItem.picUrl}} />
	      	  <View style={styles.cellContentTextStyle}>
	      	  		<Text style={styles.titleStyle}>
	      	  			{this.props.newsItem.title}
	      	  		</Text>
	      	  		<Text style={styles.timeStyle}>
	      	  			{this.props.newsItem.time}
	      	  		</Text>
	      	  		<Text style={styles.detailStyle}>
	      	  			{this.props.newsItem.description}
	      	  		</Text>
	      	  </View>
	      	
	      </View>
      </TouchableOpacity>
    );
  }
});


var styles = StyleSheet.create({

	cellContentStyle:{
		flexDirection:'row',
	},

	imageStyle:{
		height:100,
		width:100,
		padding:5,
		marginTop:5,
	},

	cellContentTextStyle:{
		flex:1,
		flexDirection:'column',
		marginTop:5,
	},

	titleStyle:{
		fontSize:20,
	},

	timeStyle:{
		fontSize:10,
	},

	detailStyle:{
		fontSize:15,
	},
});


module.exports = ContentCell;
